<script>
import screenfull from "screenfull";
import Weather from "@/components/Weather.vue";
import {logout} from "@/api/user";


export default {
  name: "Header",
  components: {
    Weather,
  },
  props: {
    collapseBtnclass: String,
    user: Object
  },
  created() {
    this.getTime();
  },
  mounted() {
    this.init();
  },
  data() {
    return {
      configuration:localStorage.getItem("configuration")?JSON.parse(localStorage.getItem("configuration")):{
        isTagsViews: this.$store.state.configuration.isTagsViews,
        isLogo: this.$store.state.configuration.isLogo,
        isTimeShow:this.$store.state.configuration.isTimeShow,
        isDynamicTitle:this.$store.state.configuration.isDynamicTitle,
      },
      isTimeShow:localStorage.getItem("configuration")?JSON.parse(localStorage.getItem("configuration")).isTimeShow:this.$store.state.configuration.isTimeShow,
      isFullscreen: false,
      drawer: false,
      breadList: [],
      currentTime: "",
      timer: "",
      dialogVisible: false,
      dropdownMenuList: [{
        path: '/person', menuName: '个人信息'
      }, {
        path: '/password', menuName: '修改密码'
      }]
    }
  },
  computed: {
    currentPathNames() {
      console.log(this.$store.state.currentPathNames);
      return this.$store.state.currentPathNames;
    }
  },
  watch: {
    currentPathName(newVal, oldVal) {
      console.log(newVal);
    },
  },
  methods: {
    saveConfiguration(){
      localStorage.setItem("configuration",JSON.stringify(this.configuration));
      this.$router.go(0);
      this.$message.success("配置保存成功");
    },
    resetConfiguration(){
      this.configuration={
        isTagsViews: true,
        isLogo: true,
        isTimeShow:true,
        isDynamicTitle: true
      }
      localStorage.setItem("configuration",JSON.stringify(this.configuration));
      this.$router.go(0);
      this.$message.success("配置重置成功");
    },
    isCollapse() {
      this.$parent.$parent.$parent.$parent.collapse();
    },
    handleCommand(index) {
      this.$store.commit("selectMenu", this.dropdownMenuList[index]);
    },
    logout() {
      logout().then(res => {
        if (res.code == 200) {
          this.$store.commit("logout");
          this.$message.success("退出成功");
        } else {
          this.$message.error(res.msg);
        }
      })

    },
    init() {
      if (screenfull.isEnabled) {
        screenfull.on('change', this.fullChange);
      }
    },
    fullScreen() {

      if (!screenfull.isEnabled) {
        return false;
      }
      screenfull.toggle();
    },
    fullChange() {
      this.isFullscreen = screenfull.isFullscreen;
    },
    timeFormat(date) {
      let year = date.getFullYear();
      let month = date.getMonth();
      let day = date.getDate();
      let hour = date.getHours();
      hour = hour < 10 ? "0" + hour : hour;
      let minute = date.getMinutes();
      minute = minute < 10 ? "0" + minute : minute;
      let second = date.getSeconds();
      second = second < 10 ? "0" + second : second;
      let week = date.getDay();
      let weekArr = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];
      this.currentTime = `${year}/${month}/${day} ${hour}:${minute}:${second} ${weekArr[week]}`
    },
    getTime() {
      this.timer = setInterval(() => {
        this.timeFormat(new Date());
      }, 1000)
    },
    destroy() {
      if (screenfull.isEnabled) {
        screenfull.off('change', this.fullChange)
      }
    }
  },
  beforeDestroy() {
    if (this.timer) {
      clearInterval(this.timer)
    }
  }
}
</script>

<template>
  <div>
    <div style="font-size: 12px;line-height:60px;display: flex;">
      <div style="flex: 1">
        <span :class="collapseBtnclass" style="cursor: pointer;font-size:18px " @click="isCollapse"></span>
        <el-breadcrumb separator-class="el-icon-arrow-right" style="display: inline-block;margin-left:10px">
          <el-breadcrumb-item :to="{ path: '/home'}">主页</el-breadcrumb-item>
          <el-breadcrumb-item v-for="item in currentPathNames">{{ item }}</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <div style="font-size: 15px;font-weight:lighter;margin-right:280px" v-if="isTimeShow">{{ currentTime }}</div>
      <div>
        <weather/>
      </div>
      <el-button type="text" v-if="!isFullscreen"><i class="el-icon-quanping1" @click="fullScreen"
                                                     style="font-size: 30px;color: grey"></i></el-button>
      <el-button type="text" v-else><i class="el-icon-tuichuquanping" @click="fullScreen"
                                       style="font-size: 30px;color: grey"></i></el-button>
      <el-dropdown style="width:170px;cursor: pointer;text-align: right" @command="handleCommand">
        <div style="display: inline-block;height:30px">
          <img :src="user.avatar" alt=""
               style="width: 30px;border-radius: 50%; position: relative; top: 10px; right: 5px">
          <span>{{ user.nickName }}</span><i class="el-icon-arrow-down" style="margin-left: 5px"></i>
        </div>
        <el-dropdown-menu slot="dropdown" style="width:100px;text-align: center">
          <el-dropdown-item style="font-size:14px;padding:5px 0" command=0>
            <router-link to="/person">个人信息</router-link>
          </el-dropdown-item>
          <el-dropdown-item style="font-size:14px;padding:5px 0" command=1>
            <router-link to="/password">修改密码</router-link>
          </el-dropdown-item>
          <el-dropdown-item style="font-size:14px;padding:5px 0">
            <span @click="drawer=true">系统设置</span>
          </el-dropdown-item>
          <el-dropdown-item style="font-size:14px;padding:5px 0">
            <span style="text-decoration: none" @click="dialogVisible=true">退出</span>
          </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
      <el-drawer :visible.sync="drawer" :with-header="false" size="17%">
        <div class="drawer-container">
          <div>
            <h3>系统布局配置</h3>
            <div class="drawer-item">
              <span>开启 Tags-Views</span>
              <el-switch v-model="configuration.isTagsViews" active-color="#13ce66" inactive-color="#dcdfe6"></el-switch>
              </div>
            <div class="drawer-item">
              <span>显示 Logo</span>
              <el-switch v-model="configuration.isLogo" active-color="#13ce66" inactive-color="#dcdfe6"></el-switch>
            </div>
            <div class="drawer-item">
              <span>显示时间</span>
              <el-switch v-model="configuration.isTimeShow" active-color="#13ce66" inactive-color="#dcdfe6"></el-switch>
            </div>
            <div class="drawer-item">
              <span>动态标题</span>
              <el-switch v-model="configuration.isDynamicTitle" active-color="#13ce66" inactive-color="#dcdfe6"></el-switch>
            </div>
            <el-divider></el-divider>
              </div>
          <el-button type="primary" plain icon="el-icon-finished" @click="saveConfiguration">保存配置</el-button>
          <el-button  type="primary" plain icon="el-icon-refresh" @click="resetConfiguration">重置配置</el-button>
            </div>
      </el-drawer>
    </div>
    <div class="exit-dialog">
      <el-dialog
          title="提示"
          :visible.sync="dialogVisible"
          width="20%"
          center>
        <span style="height: 15px;text-align: center">你确定要退出系统吗？</span>
        <span slot="footer" class="dialog-footer">
     <el-button type="primary" @click="logout">确 定</el-button>
    <el-button @click="dialogVisible = false">取 消</el-button>
  </span>
      </el-dialog>
    </div>
  </div>
</template>

<style scoped>
.exit-dialog {
  height: 60vh;
  overflow: auto;
  text-align: center;
}

.drawer-container {
  padding: 20px;
  font-size: 14px;
  line-height: 1.5;
  word-wrap: break-word
}
.drawer-container .drawer-item{
  color: rgba(0,0,0,.65);
  font-size: 14px;
  padding: 12px 0;
}
/deep/ .el-switch{
  float: right;
}
h3{
  margin-bottom: 12px;
  color: rgba(0,0,0,.85);
  font-size: 17px;
  font-weight: normal;
  line-height: 22px;
}
</style>
